<template>
    <div class="box">
        <div class="common-layout">
            <el-container>
                <!-- 右边部分 -->
                <el-aside width="40%">
                    <div class="pic">
                        <div class="pic-login"><img src="../../public/logo.png"></div>
                        <div>欢迎！</div>
                        <div>智学商城-后台管理系统</div>
                    </div>
                </el-aside>
                <!-- 左边部分 -->
                <el-main>
                    <div class="login">
                        <p>登录</p>
                        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
                            <el-form-item prop="username">
                                <el-input v-model.trim="ruleForm.username" type="text" autocomplete="off" placeholder="用户名"  @keyup.enter.native="submitForm(ruleFormRef)">
                                    <template #prefix>
                                        <el-icon class="el-input__icon">
                                            <UserFilled />
                                        </el-icon>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input v-model.trim="ruleForm.password" type="password" autocomplete="off"
                                    placeholder="登录密码"  @keyup.enter.native="submitForm(ruleFormRef)">
                                    <template #prefix>
                                        <el-icon class="el-input__icon">
                                            <Lock />
                                        </el-icon>
                                    </template>
                                </el-input> 
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="batchAction(ruleFormRef)">登录</el-button>
                            </el-form-item>
                        </el-form>
                        <p>作者：李某人</p>
                    </div>
                </el-main>
            </el-container>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { UserFilled, Lock } from '@element-plus/icons-vue'
import qs from 'qs'
import { ElMessage } from 'element-plus'
import cookie from "js-cookie";
import {useRouter,useRoute} from "vue-router";
import { debounce } from "@/utils/antiShake";
import { post } from "@/utils/request";
import { useUserStore } from "@/stores/admin";
const route = useRoute()
const store = useUserStore()
const router = useRouter()
const ruleFormRef = ref<FormInstance>()
//   用户非空验证
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入账户'))
  }
  callback()
}
//用户密码非空验证
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  }
  callback()
}
//用户和密码的数据
const ruleForm = reactive({
username: 'admin',
password: '1234567'
})

//验证规则
const rules = reactive({
username: [{ validator: validatePass, trigger: 'blur' }],
password: [{ validator: validatePass2, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.validate((valid) => {
if (valid) {
    // console.log('submit!')
   //请求参数
   let form ={
     _gp:"admin",
     _mt:"login",
     ...ruleForm
   }
   //请求接口
 post(form).then((res:any)=>{
    console.log(res)
    if(200==res.errno){
        ElMessage.success("登录成功")
        let now = new Date()
        //token写入到cookie,过期时间为30分钟
        now.setTime(now.getTime()+1000*60*30)
        // console.log(now)
        cookie.set("token",res.data,{expires:now})
        return Promise.resolve(res.data)
    }else{
        // ElMessage.warning(res.errmsg)
        return Promise.reject(res.errmsg)
    }
 }).then((res:any)=>{ //获取用户信息
    // console.log(res)
    //用户信息请求的参数
    const data = {
        _gp:"admin",
        _mt:"info",
    }
    post(data).then((res:any)=>{
        // console.log(res)
        if(200==res.errno){
            store.setUser({...res.data,password:ruleForm.password}) //将用户信息保存在pinia中
            let back = route.query.back
            if(back){
                router.replace(back)
                return
            }
            router.replace("/index")
        }else{
            return Promise.reject(res.errmsg)
        }
    })
 }).catch(error=>{
    console.log(error)
    ElMessage.error(error)
 })
 
} else {
console.log('error submit!')
ElMessage.error("登录失败")
return false
}
})
}
//防抖
const batchAction = (item: FormInstance | undefined) => {
    debounce(function () {
        submitForm(item)
    }, 2000)
};


</script>
<style scoped lang="less">
.box {
    width: 100%;
    display: flex;
    height: 100vh;
    background: url("../../public/login-back.png") 0px 0px no-repeat;
    background-size: 100% 100%;

    .common-layout {
        width: 50%;
        margin: auto;
        min-height: 60vh;
        .el-container {
            min-height: 60vh;
            // 左边
            .el-aside {
                background-color: #005DE9;
                display: flex;
                border-radius: 5px 0px 0px 5px;
                .pic {
                    margin: auto;
                    text-align: center;
                    color: #FFF;

                    .pic-login {
                        margin: auto;
                        width: 100px;
                        height: 100px;
                        border-radius: 50%;
                        box-shadow: 9px -10px 35px 1px #dee3eb;

                        img {
                            width: 100px;
                            height: 100px;
                        }
                    }

                    >div {
                        margin-top: 10px;
                    }
                }
            }
            // 右边
            .el-main {
                background-color: #FFF;
                display: flex;
                border-radius: 0px 5px 5px 0px;
                width: 60%;
                .login {
                    margin: auto;
                    text-align: center;
                    width: 80%;
                    p {
                        margin-bottom: 15px;
                    }

                    /deep/ .el-input__inner {
                        height: 40px;
                    }

                    .el-button--primary {
                        width: 130px;
                        margin: auto;
                    }
                }
            }
        }
    }
}
</style>